<template>
	<view>
		<UniNavBar title="基本资料" rightText="保存" @rightClick="onSave" />
		<view class="wrap">
			<u-form labelPosition="left" labelWidth="80" class="u_form_box" :labelStyle="{ color: '#252525' }"
				:model="formData" ref="uForm">
				<u-form-item label="头像">
					<!-- <u-upload @afterRead="onAvatar" :fileList="fileList" name="file" :maxCount="1" :multiple="false" -->
					<!-- width="50" height="50"> -->
					<image v-if="formData.avatar" class="avatar" :src="IMG_URL + formData.avatar"
						style="border-radius:50% ;width: 60rpx;height: 60rpx;margin-left: 350rpx;" @click="avatarOn()" />
					<image v-else src="/static/imgs/tou.png" style="width: 60rpx;height: 60rpx;margin-left: 350rpx;">
					</image>
					<!-- </u-upload> -->
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="昵称">
					<u-input v-model="formData.username" placeholder="请输入" border="none"></u-input>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item label="性别" @click="showSex = true;">
					<u-input v-model="gender" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>

				</u-form-item>
				<u-form-item label="年龄">
					<u-input v-model="formData.age" disabledColor="#ffffff" placeholder="请输入" border="none"
						type="number"></u-input>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<u-form-item label="生日" @click="birthdayFlag = true;">
					<u-input v-model="formData.birthday" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="星座" @click="showConstellation = true;">
					<u-input v-model="formData.constellation" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none" @click="showConstellation = true;"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="所在地" @click="cityShow = true;">
					<u-input v-model="formData.location" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>

				</u-form-item>

				<u-form-item label="简介" labelPosition="top">
					<u-textarea v-model="formData.introduction" placeholder="点击这里，填写简介" height="140"
						border="none"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<!-- 性别 -->
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<!-- 生日 -->
		<u-datetime-picker :show="birthdayFlag" @cancel="() => birthdayFlag = false" @confirm="dateConfirm"
			mode="date"></u-datetime-picker>

		<!-- 星座 -->
		<u-action-sheet :show="showConstellation" :actions="starActions" title="请选择" @close="showConstellation = false"
			@select="constellationSelect">
		</u-action-sheet>
		<!-- 所在地 -->
		<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
			@cancel="cityShow = false"></u-picker>
		<!-- <qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" :src="avatar"
			v-if="imageShow"></qf-image-cropper> -->
	</view>
</template>

<script>
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	import {
		uploadImage
	} from "../../api/common.js";
	import {
		IMG_URL,
	} from "../../config/app.js";
	import {
		updateInfo,
		uploadBase64Image
	} from '@/api/my.js'
	import UniNavBar from "@/components/uniNavbar/index.vue"
	import cityData from '@/utlis/city.js'

	import {
		getUserInfo,
	} from "../../api/login.js";

	export default {
		components: {
			UniNavBar,
			QfImageCropper
		},
		data() {
			return {
				imageShow: false,
				IMG_URL: IMG_URL,
				formData: {},
				fileList: [],
				showSex: false,
				birthdayFlag: false,
				showConstellation: false,
				cityShow: false,
				actions: [{
					name: '男',
				}, {
					name: '女'
				}],
				starActions: [{
					name: '白羊座',
				}, {
					name: '金牛座'
				}, {
					name: '双子座'
				}, {
					name: '巨蟹座'
				}, {
					name: '狮子座'
				}, {
					name: '处女座'
				}, {
					name: '天秤座'
				}, {
					name: '天蝎座'
				}, {
					name: '射手座'
				}, {
					name: '摩羯座'
				}, {
					name: '水瓶座'
				}, {
					name: '双鱼座'
				}],
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				gender: '',
				avatar: "",

			}
		},
		computed: {},
		onLoad() {
			this.initCityData();
			this.getData()

		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				// 可以在此上传到服务端
				this.onAvatar(path)
			})
		},
		mounted() {},
		methods: {
			avatarOn() {

				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			async handleCrop(e) {
				console.log(e);
				let that = this
				await uploadBase64Image({
					'base64_image': e
				}).then(res => {
					that.formData.avatar = res.data
					console.log(that.formData.avatar,'上传头像');
				})
			},
			async onAvatar(e) {
				console.log(e, '获取文件');
				let img = e;
				console.log(img)
				let res = await uploadImage(img)
				// this.formData.url = res.data.url

				this.formData.avatar = res.data.url

			},
			save() {
				console.log('保存')
			},
			//性别选择
			sexSelect(e) {
				console.log(e, '选择')
				this.formData.gender = e.name == '男' ? '1' : '0'
				this.gender = e.name
			},
			constellationSelect(e) {
				this.formData.constellation = e.name
			},
			dateConfirm(val) {
				console.log(val)
				const selectedTime = new Date(val.value);
				const formattedTime =
					`${selectedTime.getFullYear()}-${(selectedTime.getMonth() + 1).toString().padStart(2, '0')}-${selectedTime.getDate().toString().padStart(2, '0')}`;
				this.formData.birthday = formattedTime
				this.birthdayFlag = false
			},

			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},

			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},

			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				const result = e.value.join('/');
				this.formData.location = result

				// 隐藏城市选择器
				this.cityShow = false;
			},


			/**
			 * 保存
			 */
			async onSave() {
				let data = {
					'avatar': this.formData.avatar,
					'username': this.formData.username,
					'gender': this.formData.gender,
					'birthday': this.formData.birthday,
					'constellation': this.formData.constellation,
					'location': this.formData.location,
					'introduction': this.formData.introduction,
					'age': this.formData.age,
				}
				console.log(data, '----------------');
				let res = await updateInfo(data)
				console.log('更新个人信息', res);
				uni.showToast({
					'icon': 'none',
					'title': res.msg,
					'duration': 1500
				})

				setTimeout(function() {
					uni.navigateBack()
				}, 1000);
			},
			/**
			 * 网络请求
			 */
			async getData() {
				let res = await getUserInfo()
				console.log(res, '获取当前用户');
				this.formData = res.data
				this.gender = this.formData.gender == 0 ? '女' : '男';
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		background: #fff;
		border-radius: 30rpx;
		padding: 0 30rpx;
		width: 690rpx;
		margin: 24rpx auto 0;

		.u-form-item {
			padding: 12rpx 0;

			/deep/ .u-upload__wrap {
				justify-content: flex-end;
				margin-right: 20rpx;
			}
		}
	}
</style>